<template>
  <div class="login-container">
    <div class=" max-w-6xl w-full h-screen m-auto flex items-center justify-end px-12">
      <div class="w-96 shadow rounded p-12  bg-back relative">
        <div class="mb-6 max-h-64 overflow-y-auto">
          <ul v-for="(item, index) in list" v-if="list.length">
            <li class="item">
              <span @click="userLogin(item)" :class="item.className? ' bg-[#409EFF] check mr-2 rounded-full className':'border check mr-2 rounded-full'"></span>
              <span>{{ item.nickname }}：</span>{{ item.account }}
            </li>
          </ul>
          <ul class="text-center" v-else>{{ $t('public.Unbound') }}</ul>
        </div>
        <el-form>
          <el-button :loading="loading" type="primary" size="large" class="loginbutton" @click.prevent="handleLogin()"
            @keydown.enter="keyDown()">
            {{ $t('public.sign') }}
          </el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t, locale } = useI18n()
import { useRoute } from 'vue-router';
import { getUsers, managerLogin } from '@/api/login'
import { ref } from 'vue'
import router from '@/router';
let list = ref([])
let rowManagerid = ref(null)
const loading = ref(false)
// redirect path
const route = useRoute()
const emits = defineEmits(['refreshComponent'])
const userLogin = (row) => {
  rowManagerid.value = row.manager_id
  list.value.forEach(item => {
    item.className = false
  })
  row.className = true
}
const keyDown = (e) => {
  if (e.keyCode == 13) {
    handleLogin()
  }
}
window.addEventListener('keydown', keyDown)
const findUser = () => {
  getUsers({ openid: route?.query.openid }).then(res => {
    if (res.state == 200) {
      list.value = res.data
    }
  })
}
findUser()
const handleLogin = () => {
  let arr = list.value.filter(item => {
    return item.className
  })
  if (!arr.length) {
    return ElMessage({
      message: $t('public.selectLogin'),
      type: 'warning'
    })
  }
  let parm = {
    login_id: route?.query.login_id,
    openid: route?.query.openid,
    manager_id: rowManagerid.value
  }
  managerLogin(parm).then(res => {
    router.push({ path: '/success'})
  })
}

</script>

<style lang="scss">
.item{
  display: flex;
}
.check{
  display: block;
  width: 20px;
  height: 20px;
}
.className{
  position: relative;
}
.className::before{
  position: absolute;
  content: '✔';
  font-size: 12px;
  color: #fff;
  left: 5px;
  top: 1;
}
.login-container {
  background-image: url('@/assets/login-bg.webp');
  background-size: cover;
  background-position: center;

  .modeChange {
    position: absolute;
    z-index: 9;
    top: 0;
    right: 0;
    cursor: pointer;
    width: 80px;
    height: 80px;
    padding: 10px;

    .modeImg {
      width: 100%;
      height: 100%;
    }

    &:before {
      content: "";
      display: block;
      border-style: solid;
      border-width: 40px;
      border-color: transparent transparent #eee #eee;
      position: absolute;
      top: 0;
      right: 0;
      box-shadow: -3px 3px 20px 0px rgba(0, 0, 0, 0.2);
      transition: all .3s;
    }

    &:hover {
      &:before {
        border-width: 45px;
      }
    }
  }

  .modeAdmin {
    padding: 10px 10px 30px 30px;
  }

  .codeWrap {
    text-align: center;
    padding-top: 10px;

    #imgContainer {
      min-height: 200px;
      max-width: 200px;
      margin: auto;
    }

    p {
      margin-top: 40px;
      font-size: 16px;
      color: #1a1a1a;
    }
  }
}

/* reset element-ui css */
.login-container {
  .el-input {
    height: 48px;

    input {
      background: transparent;
      border: 0px;
      border-radius: 0px;
      padding: 0 10px;
      color: #545454;
    }

    .el-input__wrapper {
      padding: 0 15px;
    }
  }
}

.loginbutton {
  width: 100%;
  color: #fafafa;
  font-size: 16px;
}
</style>
